<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

    <link rel="stylesheet" href="../bootstrap-3.3.4/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../Flat-UI-master/dist/css/flat-ui.min.css"/>
    <script src="../Flat-UI-master/dist/js/vendor/jquery.min.js"></script>
    <script src="../bootstrap-3.3.4/dist/js/bootstrap.min.js"></script>
    <script src="../Flat-UI-master/dist/js/flat-ui.min.js"></script>
    <title></title>
    <style>
        .row{
            margin-left: 20px;
            margin-right: 20px;;
        }
        .line-center{
            line-height:50px;
            text-align: center;
        }
        .row input{
            width: 50px;
        }
    </style>
    <script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">这什么东西</span>
            </button>
            <a class="navbar-brand" href="Index.html">图书商城</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="Index.html">首页</a></li>
                <li><a href="Order.html">我的订单</a></li>
                <li><a href="UserInfo.html">个人中心</a></li>
                <!--<li id="reload" hidden="hidden"><a >刷新</a></li>-->
            </ul>
            <ul class="nav navbar-nav navbar-right hidden-sm">
                <li><a href="Login.html">登录</a></li>
                <li><a href="Register.html">注册</a></li>
                <li><a id="out">退出</a></li>
                <li>
                    <a href="Cart.html"><span class="glyphicon glyphicon-shopping-cart">购物车</span></a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>
<!--content-->
<div class="container">
    <div class="row thumbnail center">
        <div class="col-sm-12">
            <h1 class="text-center" style="margin-bottom: 30px">购物车</h1>
        </div>
        <div class=" list-group" >

            <div class="col-sm-12 thumbnail">
                <div class="col-sm-4 line-center">图书</div>
                <div class="col-sm-1 line-center">单价</div>
                <div class="col-sm-4 line-center">数量 </div>
                <div class="col-sm-2 line-center">小计</div>
                <div class="col-sm-1 line-center">操作</div>
            </div>
            <div id="divfirst">

            </div>
            <!--<div class="col-sm-12  list-group-item">-->
                <!--<div class="col-sm-1 line-center" style="width: 50px;height: 50px;">-->

                    <!--<img src="../Flat-UI-master/dist/img/icons/png/Book.png" style="height: 100%;" alt=""/>-->
                <!--</div>-->
                <!--<div class="col-sm-3 line-center">书名</div>-->
                <!--<div class="col-sm-1 line-center">单价</div>-->
                <!--<div class="col-sm-4 line-center">-->
                    <!--<button type="button" class="btn btn-default">-->
                        <!--<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>-->
                    <!--</button>-->
                    <!--<input type="text" class="small" value="123"/>-->
                    <!--<button type="button" class="btn btn-default">-->
                        <!--<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>-->
                    <!--</button>-->
                <!--</div>-->
                <!--<div class="col-sm-2 line-center">小计</div>-->
                <!--<div class="col-sm-1 line-center"><button class="btn btn-danger">删除</button></div>-->
            <!--</div>-->

            <div class="col-sm-12 thumbnail">
                <div class=" col-sm-offset-4 col-sm-2 text-right">总数：<span id="sum"></span></div>
                <div class="col-sm-2 text-right">总价：<span id="totalprice"></span></div>
            </div>
        </div>
        <div class="col-sm-offset-7 col-sm-5" style="padding: 30px;">
            <div class="col-sm-6 btn btn-success btn-block" id="shop">继续购物</div>
            <div class="col-sm-6  btn btn-success btn-block" id="buy">提交订单</div>
            <span id="span"></span>
        </div>
    </div>
</div>


<!--footer-->
<div class="navbar navbar-default navbar-static-bottom">
    版权声明区
</div>
<script>
    // 所有数字总价
    var sum=0;
    //所有价格总和
    var totalprice=0;
    window.onload=function () {
        // $("<div><p>1234</p></div>").appendTo("#divfirst");
        $.ajax({
            url:"/car",
            type:"get",
            success:function (re) {
                console.log(re);
                if (re.code == 1002) {
                    alert("未登录不能使用购物车")
                    location.href="/Home/Login.html";
                }else if (re.code == 1001) {
                    alert("查找失败");
                }else if (re.code == 1000) {
                    for (var i = 0; i < re.data.length; i++) {
                        sum = sum+re.data[i].count;
                        totalprice = totalprice+re.data[i].total;
                        $("<div class=\"col-sm-12  list-group-item\">\n" +
                            "                <div class=\"col-sm-1 line-center\" style=\"width: 50px;height: 50px;\">\n" +
                            "\n" +
                            "                    <img src=\""+re.data[i].image+"\" style=\"height: 100%;\" alt=\"\"/>\n" +
                            "                </div>\n" +
                            "                <div class=\"col-sm-3 line-center\" id='bname' name='"+re.data[i].bid+"'>"+re.data[i].bname+"</div>\n" +
                            "                <div class=\"col-sm-1 line-center\" id='price'>"+re.data[i].price+"</div>\n" +
                            "                <div class=\"col-sm-4 line-center\">\n" +
                            "                    <button type=\"button\" class=\"btn btn-default\" id='reduce'>\n" +
                            "                        <span class=\"glyphicon glyphicon-minus\" aria-hidden=\"true\"></span>\n" +
                            "                    </button>\n" +
                            "                    <input type=\"number\" class=\"small\" id='number' value=\""+re.data[i].count+"\" disabled=\"true\"/>\n" +
                            "                    <button type=\"button\" class=\"btn btn-default\" id='plus'>\n" +
                            "                        <span class=\"glyphicon glyphicon-plus\" aria-hidden=\"true\"></span>\n" +
                            "                    </button>\n" +
                            "                </div>\n" +
                            "                <div class=\"col-sm-2 line-center\" id='total'>"+re.data[i].total+"</div>\n" +
                            "                <div class=\"col-sm-1 line-center\"><button class=\"btn btn-danger\" id='del' name='"+re.data[i].carid+"'>删除</button></div>\n" +
                            "            </div>").appendTo("#divfirst");
                    }
                    $("#sum").html(sum);
                    $("#totalprice").html(totalprice);
                }
            }
        })
    }
    $("#divfirst").on("click","#del",function () {
        // console.log("绑定成功")
        var carid = $(this).attr("name");
        var number = $(this).parents().parents().children(".col-sm-4").children("input").val();
        var total = $(this).parents().parents().children(".col-sm-2").html();
        console.log(number);
        console.log(total);
        // console.log(carid);
        var a = $(this)
        // console.log(a.parents().parents().html());
        $.ajax({
            url:"/delcar",
            type:"get",
            data:{
                carid:carid
            },
            success:function (re) {
                if (re.code == 1002) {
                    alert(ar.msg)
                }else if (re.code == 1001) {
                    alert(ar.msg)
                }else if (re.code == 1000) {
                    a.parents().parents(".col-sm-12").remove();
                    sum = parseInt(sum)-parseInt(number)
                    $("#sum").html(sum);
                    totalprice = parseInt(totalprice)-parseInt(total);
                    $("#totalprice").html(totalprice)
                }
            }
        })
    });
    $("#divfirst").on("click","#reduce",function () {
        var number = $(this).parents().children("#number").val();
        console.log(number);
        if (number - 1 < 1) {
            number=1;
        }else {
            number = number-1;
        }
        var bid = $(this).parents().parents().children("#bname").attr("name");
        var price = $(this).parents().parents().children("#price").html();
        // console.log(bid);
        // console.log(number);
        // console.log(price);
        var a = $(this);
        $.ajax({
            url:"/changecar",
            type:"get",
            data:{
                bid:bid,
                number:number,
                price:price
            },
            success:function (re) {
                console.log(re);
                if (re.code == 1002) {
                    // alert("请先登录")
                    $("#span").html("请先登录")
                }else if (re.code==1001){
                    // alert(re.msg)
                    $("#span").html(re.msg)
                } else if (re.code == 1000) {
                    if (number - 1 < 1) {

                    }else {
                        a.parents().children("#number").attr("value", number);
                        // $(this).parents().children("#number").val(number);
                        // $(this).next().val(number);
                        console.log($(this).next().val(number));
                        var total = a.parents().parents().children("#total").html();
                        console.log("total:"+total);
                        total = parseInt(total) - parseInt(price);
                        // a.parents().parents().children("#total").empty();
                        a.parents().parents().children("#total").html(total);
                        // var sum = $("#sum").html();
                        sum = sum - 1;
                        $("#sum").html(sum);
                        // var totalprice = $("#totalprice").html();
                        totalprice = parseInt(totalprice) - parseInt(price);
                        $("#totalprice").html(totalprice);
                    }
                }
            }
        })
    });
    $("#divfirst").on("click","#plus",function () {
        var number = $(this).parents().children("#number").val();
        console.log(number);
        number++;
        var bid = $(this).parents().parents().children("#bname").attr("name");
        var price = $(this).parents().parents().children("#price").html();
        // console.log(bid);
        // console.log(number);
        console.log("price:"+price);
        var a = $(this);
        $.ajax({
            url:"/changecar",
            type:"get",
            data:{
                bid:bid,
                number:number,
                price:price
            },
            success:function (re) {
                console.log(re);
                if (re.code == 1002) {
                    // alert("请先登录")
                    $("#span").html("请先登录")
                }else if (re.code==1001){
                    // alert(re.msg)
                    $("#span").html(re.msg)
                } else if (re.code == 1000) {
                        a.parents().children("#number").attr("value", number);
                        // $(this).parents().children("#number").val(number);
                        // $(this).next().val(number);
                        console.log($(this).next().val(number));
                        var total = a.parents().parents().children("#total").html();
                        console.log("total:"+total);
                        total = parseInt(total) + parseInt(price);
                        // a.parents().parents().children("#total").empty();
                        a.parents().parents().children("#total").html(total);
                        // var sum = $("#sum").html();
                        sum++;
                        $("#sum").html(sum);
                        // var totalprice = $("#totalprice").html();
                        totalprice = parseInt(totalprice) + parseInt(price);
                        $("#totalprice").html(totalprice);
                }
            }
        })
    });
    $("#shop").click(function () {
        location.href="/Home/Index.html";
    });
    $("#buy").click(function () {
        var total = $("#totalprice").html();
        $.ajax({
            url:"/addorder",
            type:"get",
            data:{
              total:total
            },
            success:function (re) {
                if (re.code == 1003) {
                    // alert(re.msg)
                    console.log(re.msg)
                    $("#span").html(re.msg)
                }else if (re.code == 1002) {
                    // alert(re.msg);
                    console.log(re.msg)
                    $("#span").html(re.msg)
                }else if (re.code == 1001) {
                    // alert(re.msg)
                    console.log(re.msg)
                    $("#span").html(re.msg)
                }else if (re.code == 1000){
                    location.href="/Home/Order.html";
                }
            }
        })
    });
    $("#out").click(function () {
        $.ajax({
            url:"/out",
            type:"get",
            success:function (re) {
                if (re.code == 1000) {
                    location.href="/Home/Login.html"
                }
            }
        })
    })
    $("#reload").click(function () {
        $("#divfirst").empty();
        $.ajax({
            url:"/car",
            type:"get",
            success:function (re) {
                console.log(re);
                if (re.code == 1002) {
                    alert("未登录不能使用购物车")
                    location.href="/Home/Login.html";
                }else if (re.code == 1001) {
                    alert("查找失败");
                }else if (re.code == 1000) {
                    for (var i = 0; i < re.data.length; i++) {
                        sum = sum+re.data[i].count;
                        totalprice = totalprice+re.data[i].total;
                        $("<div class=\"col-sm-12  list-group-item\">\n" +
                            "                <div class=\"col-sm-1 line-center\" style=\"width: 50px;height: 50px;\">\n" +
                            "\n" +
                            "                    <img src=\""+re.data[i].image+"\" style=\"height: 100%;\" alt=\"\"/>\n" +
                            "                </div>\n" +
                            "                <div class=\"col-sm-3 line-center\" id='bname' name='"+re.data[i].bid+"'>"+re.data[i].bname+"</div>\n" +
                            "                <div class=\"col-sm-1 line-center\" id='price'>"+re.data[i].price+"</div>\n" +
                            "                <div class=\"col-sm-4 line-center\">\n" +
                            "                    <button type=\"button\" class=\"btn btn-default\" id='reduce'>\n" +
                            "                        <span class=\"glyphicon glyphicon-minus\" aria-hidden=\"true\"></span>\n" +
                            "                    </button>\n" +
                            "                    <input type=\"number\" class=\"small\" id='number' value=\""+re.data[i].count+"\"/>\n" +
                            "                    <button type=\"button\" class=\"btn btn-default\" id='plus'>\n" +
                            "                        <span class=\"glyphicon glyphicon-plus\" aria-hidden=\"true\"></span>\n" +
                            "                    </button>\n" +
                            "                </div>\n" +
                            "                <div class=\"col-sm-2 line-center\" id='total'>"+re.data[i].total+"</div>\n" +
                            "                <div class=\"col-sm-1 line-center\"><button class=\"btn btn-danger\" id='del' name='"+re.data[i].carid+"'>删除</button></div>\n" +
                            "            </div>").appendTo("#divfirst");
                    }
                    $("#sum").html(sum);
                    $("#totalprice").html(totalprice);
                }
            }
        })
    })
</script>
</body>
</html>